<template>
  <div>
    <Form ref="searchForm" :model="searchForm" inline :label-width="70">
      <FormItem label="时间范围" prop="time">
        <DatePicker
          type="daterange"
          format="yyyy-MM-dd"
          clearable
          placeholder="选择起始时间"
          style="width: 200px"
        ></DatePicker>
      </FormItem>
      <FormItem style="margin-left: -35px" class="br">
        <Button @click="handleSearch(1)" type="primary" icon="ios-search"
          >查询模拟数据1</Button
        >
        <Button @click="handleSearch(2)" type="primary" icon="ios-search"
          >查询模拟数据2</Button
        >
        <Button @click="handleReset">重置</Button>
      </FormItem>
    </Form>
    <apexchart
      type="area"
      height="450"
      width="1140"
      :options="chartOptions"
      :series="series"
    />
  </div>
</template>

<script>
var zh = require("@/libs/zh.json");
export default {
  name: "Chart",
  data() {
    return {
      series: [],
      chartOptions: {
        chart: {
          stacked: false,
          toolbar: {
            show: true,
          },
          locales: [zh],
          defaultLocale: "zh",
        },
        grid: {
          show: true,
        },
        stroke: {
          curve: "smooth",
          width: 2,
        },
        fill: {
          type: "gradient",
          gradient: {
            opacityFrom: 0.8,
            opacityTo: 0.6,
          },
        },
        xaxis: {
          type: "datetime",
          labels: {
            datetimeUTC: false,
            format: "yyyy年 MMM dd日",
          },
        },
        yaxis: {
          // max: 11,
        },
        legend: {
          show: true,
        },
        dataLabels: {
          enabled: false,
        },
        tooltip: {
          enabled: true,
          theme: "light",
          x: {
            show: true,
            format: "MMM dd日 HH:mm:ss",
          },
          y: {
            formatter: function (val) {
              return val + " 万";
            },
          },
        },
      },
    };
  },
  methods: {
    handleSearch(v) {
      if (v == 1) {
        this.getData1();
      } else {
        this.getData2();
      }
    },
    getData1() {
      let x = [];
      // 模拟数据
      let data = [
        {
          v: 1,
          createTime: "2021-07-01 10:00:00",
        },
        {
          v: 2,
          createTime: "2021-07-01 10:01:00",
        },
        {
          v: 3,
          createTime: "2021-07-01 10:02:00",
        },
        {
          v: 2.3,
          createTime: "2021-07-01 10:03:00",
        },
        {
          v: 3.5,
          createTime: "2021-07-01 10:04:00",
        },
        {
          v: 3.8,
          createTime: "2021-07-01 10:05:00",
        },
        {
          v: 2,
          createTime: "2021-07-01 10:06:00",
        },
        {
          v: 1,
          createTime: "2021-07-01 10:07:00",
        },
        {
          v: 2,
          createTime: "2021-07-01 10:08:00",
        },
        {
          v: 3,
          createTime: "2021-07-01 10:09:00",
        },
        {
          v: 2.3,
          createTime: "2021-07-01 10:10:00",
        },
        {
          v: 3.5,
          createTime: "2021-07-01 10:11:00",
        },
        {
          v: 3.8,
          createTime: "2021-07-01 10:12:00",
        },
        {
          v: 2,
          createTime: "2021-07-01 10:13:00",
        },
      ];
      data.forEach((e) => {
        x.push({
          x: e.createTime,
          // 保留3位小数
          y: e.v.toFixed(3),
        });
      });

      this.series = [
        {
          name: "销量",
          data: x,
        },
      ];
    },
    getData2() {
      let x = [],
        y = [],
        z = [];
      // 模拟数据
      let data = [
        {
          x: 1,
          y: 2.3,
          z: 1.5,
          createTime: "2021-07-01 10:00:00",
        },
        {
          x: 2,
          y: 2.8,
          z: 1.2,
          createTime: "2021-07-01 10:01:00",
        },
        {
          x: 3,
          y: 4.1,
          z: 0.7,
          createTime: "2021-07-01 10:02:00",
        },
        {
          x: 4,
          y: 4.8,
          z: 1.2,
          createTime: "2021-07-01 10:03:00",
        },
        {
          x: 2,
          y: 3.1,
          z: 2.2,
          createTime: "2021-07-01 10:04:00",
        },
        {
          x: 4,
          y: 4.1,
          z: 2.2,
          createTime: "2021-07-01 10:05:00",
        },
        {
          x: 1,
          y: 3.1,
          z: 3.2,
          createTime: "2021-07-01 10:06:00",
        },
        {
          x: 5,
          y: 4.1,
          z: 1.2,
          createTime: "2021-07-01 10:07:00",
        },
        {
          x: 3,
          y: 4.1,
          z: 1.2,
          createTime: "2021-07-01 10:08:00",
        },
      ];
      data.forEach((e) => {
        x.push({
          x: e.createTime,
          // 保留3位小数
          y: e.x.toFixed(3),
        });
        y.push({
          x: e.createTime,
          y: e.y.toFixed(3),
        });
        z.push({
          x: e.createTime,
          y: e.z.toFixed(3),
        });
      });

      this.series = [
        {
          name: "商品A",
          data: x,
        },
        {
          name: "商品B",
          data: y,
        },
        {
          name: "商品C",
          data: z,
        },
      ];
    },
    handleReset() {
      this.series = [];
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
</style>